/* eslint-disable @typescript-eslint/no-unused-vars */
import { List, Modal, Radio, Icon } from 'antd-mobile-v2';
import * as React from 'react';
import { Props, State } from './interface';
import './index.less';
import noDataImg from '@/assets/images/no-data.png';
import { GetArrMap } from '@/utils';

export class RadioSelect extends React.Component<Props, State> {
  public static defaultProps = new Props();
  public state = new State();
  constructor(props: Props) {
    super(props);
    this.state = {
      isModal: false,
      options: [],
      showModal: false,
      selectedValue: null,
      // checkedValue: '',
      checkedLabel: ''
    };
  }

  public componentDidMount() {
    this.setInitSelectValue();
  }

  public setInitSelectValue() {
    const value = this.props.selectedValue;
    if (value) {
      this.setState({
        selectedValue: value
      });
    }
  }

  // private onChange = (value: any) => {
  //   if (this.props.form) {
  //     const result = value
  //       ? { value: value.value, text: value.label }
  //       : undefined;
  //     this.props.form.setFieldsValue({ [this.props.code]: result });
  //   }
  //   this.props.onChange && this.props.onChange(value);
  // };

  private showModal = (e: any) => {
    e.preventDefault();
    if (this.props.disabled) return;
    this.setState({
      showModal: true
    });
  };

  onClose = () => {
    this.setState({
      showModal: false
    });
  };

  public closest(el: any, selector: any) {
    const matchesSelector =
      el.matches ||
      el.webkitMatchesSelector ||
      el.mozMatchesSelector ||
      el.msMatchesSelector;
    while (el) {
      if (matchesSelector.call(el, selector)) {
        return el;
      }
      el = el.parentElement;
    }
    return null;
  }

  onWrapTouchStart = (e: any) => {
    // fix touch to scroll background page on iOS
    if (!/iPhone|iPod|iPad/i.test(navigator.userAgent)) {
      return;
    }
    const pNode = this.closest(e.target, '.am-modal-content');
    if (!pNode) {
      e.preventDefault();
    }
  };

  handleChecked = (item: any) => {
    this.setState({
      showModal: false,
      selectedValue: item
    });
    console.log('radio onChange', item.value);
    this.props.onChange && this.props.onChange(item.value);
  };

  modal = (radioOptions: any) => {
    return (
      <Modal
        className='radioModal'
        visible={this.state.showModal || false}
        popup
        onClose={this.onClose}
        animationType='slide-up'
        wrapProps={{ onTouchStart: this.onWrapTouchStart }}
      >
        <List
          renderHeader={() => (
            <div className='modalTitle'>
              {this.props.name}
              <Icon type='cross' className='closeIcon' onClick={this.onClose} />
            </div>
          )}
        >
          <List.Item>
            {/* <div className="subTitle">分类标题</div> */}
            {radioOptions && radioOptions.length > 0 ? (
              radioOptions.map((i: any) => (
                <Radio.RadioItem
                  key={i.value}
                  checked={this.state.selectedValue?.value === i.value}
                  onClick={() => this.handleChecked(i)}
                >
                  {i.label}
                </Radio.RadioItem>
              ))
            ) : (
              <div style={{ textAlign: 'center' }}>
                <img
                  src={noDataImg}
                  alt=''
                  style={{ width: '120px', height: '120px' }}
                />
                <span style={{ display: 'block' }}>
                  {this.props.notFoundContent}
                </span>
              </div>
            )}
          </List.Item>
        </List>
      </Modal>
    );
  };

  public render() {
    const {
      error,
      name,
      code,
      required,
      placeholder,
      options,
      formOptions,
      value,
      ...otherProps
    } = this.props;
    const optionsMap = GetArrMap(options);
    const valueText = optionsMap[value];

    const extra = valueText ?? (
      <span style={{ color: '#B8B8B8' }}>{placeholder}</span>
    );

    return (
      <>
        <List.Item
          arrow='horizontal'
          onClick={this.showModal}
          extra={extra}
          {...otherProps}
          className={
            'radio-select-wrap ' + (this.props.disabled ? 'disabled' : '')
          }
        >
          {name}
        </List.Item>
        {this.modal(options)}
      </>
    );
  }
}
